<template>
	<view>
		<vs-nav-bar background="#fff" title="同步课堂" fixed topHeight></vs-nav-bar>
		<view class="wraper">
			<view class="flexwrap between">
				<view class="item" v-for="(item,index) in list" :key="index"  >
					<view class="img-w" @click="handlePlayVideo(item)">
						<vs-ratio-view  ratio="2/1">
							<!-- <video class="coverFull" ></video> -->
							<view class="coverFull" style="display: flex;align-items: center;justify-content: center;">
								<vs-img-icon url="/static/img/play.png"></vs-img-icon>
							</view>
						</vs-ratio-view>
					</view>
					<view class="desc lineClamp_1" :style="{color:item.isOnline===1?'#48b82f':'#333'}">{{index+1 +'.'+item.name}}{{item.isOnline===1?'（在线）':''}}</view>
				</view>
			
			</view>
		</view>
	</view>
</template>

<script>
	import {getClassList,playVideo} from '@/api/homeapi'
	export default{
		data(){
			return{
				listQuery:{
					page:1,
					rows:10
				},
				list:[]
			}
		},
		onLoad() {
			this.getList()
		},
		methods:{
			getList(){
				getClassList(this.listQuery).then(res=>{
					console.log(res);
					this.list = res.data
				})
			},
			handlePlayVideo(e){
				playVideo({
					type:'applet',
					version:1,
					deviceId:uni.getStorageSync('userInfo').openId,
					sxtId:e.id
				}).then(res=>{
					if(res.code==1){
						this.$Router.push({name:'play',params:{info:e}})
					}else{
						this.$fn.toast(res.data||'暂无法观看')
					}
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #fff;
	}
	.wraper{
		width: 95%;
		margin: 0 auto;
		
		.item{
			width: 48%;
			padding: 10px 0;
			.img-w{
				overflow: hidden;
				border-radius: 4px;
				background: #d8d8d8;
			}
			.desc{
				padding-top:10px;
			}
		}
	}
</style>
